<template>
  <div>
    <!--导航栏-->
    <header class="header search-header transparent">
      <div class="header-content">
        <!--logo-->
        <a href="">
          <router-link :to="{name:'Index'}" class="header-img"></router-link>
        </a>
        <!--侧边导航栏-->
        <div class="header-func">
          <!--登录注册-->
          <div class="header-login">
            <a href="#/login" class="login" v-if="type == 1"><router-link :to="{name:'Score'}">欢迎:{{d.idCard}}</router-link></a>
            <a href="#/login" class="login" v-else><router-link :to="{name:'Login'}">登录</router-link></a>
            <span class="line"> </span>
            <a href="#/register" class="register" v-if="type == 1" @click="loginout"><router-link :to="{name:'Login'}">退出登录</router-link></a>
            <a href="#/register" class="register" v-else><router-link :to="{name:'Register'}">注册</router-link></a>
          </div>
          <!--积分商城-->
          <div class="header-mall">
              <span class="header-mall-link">
                <i class="el-icon-sell"></i>
                   <router-link :to="{name:'Score'}">积分商城</router-link>
              </span>
            <span class="line"> </span>
          </div>
          <!--vip专区-->
          <div class="header-vip">
            <img src="../assets/vip.png" alt="" @click="toVip()">
            <span class="line"> </span>
          </div>
          <!--企服商城-->
          <div class="header-compservice-wrap">
            <div class="compservice header-compservice">
              <a href="#" class="header-compservice-menu">  <router-link :to="{name:'Serve'}">企服商城</router-link> </a>
            </div>
            <span class="line"> </span>
          </div>
          <!--应用-->
          <div class="head-menus">
            <div class="head-menus-poptip ivu-poptip">
              <div class="ivu-poptip-rel">
                <el-popover
                  placement="top-start"
                  title=""
                  width="450"
                  height="500"
                  trigger="hover"
                  content="">
                  <div>
                    <div class="f_1">
                      <h3 style="margin-left: 10px">| 热门功能</h3>

                      <div style="float:left;margin-left:10px;width: 80px;height: 80px;">
                         <a href="maintain">
                        <img src="../assets/logo/1.png" style="width: 46px;height: 46px;margin-left: 15px;margin-top: 10px" alt="">
                        <br><span style="margin-left: 10px">批量查询</span>
                        </a>
                      </div>

                      <div style="margin-left:10px;float:left;width: 80px;height: 80px;">
                        <a href="maintain">
                        <img src="../assets/logo/2.png" style="width: 46px;height: 46px;margin-left: 15px;margin-top: 10px" alt="">
                        <br><span style="margin-left: 10px">企业认领</span>
                        </a>
                      </div>

                      <div style="margin-left:10px;float:left;width: 80px;height: 80px;">
                        <a href="maintain">
                        <img src="../assets/logo/3.png" style="width: 46px;height: 46px;margin-left: 15px;margin-top: 10px" alt="">
                        <br><span style="margin-left: 10px">番番寻宝客</span>
                        </a>
                      </div>

                      <div style="margin-left:10px;float:left;width: 80px;height: 80px;">
                        <a href="maintain">
                        <img src="../assets/logo/4.png" style="width: 46px;height: 46px;margin-left: 15px;margin-top: 10px" alt="">
                        <br><span style="margin-left: 10px">高级搜索</span>
                        </a>
                      </div>

                    </div>

                    <br><br><br><br><br>
                    <div class="f_2">
                      <h3 style="margin-left: 10px">| 专项查询</h3>

                      <div style="float:left;margin-left:10px;width: 80px;height: 80px;">
                        <a href="maintain">
                        <img src="../assets/logo/5.png" style="width: 46px;height: 46px;margin-left: 15px;margin-top: 10px" alt="">
                        <br><span style="margin-left: 10px">查关系</span>
                        </a>
                      </div>

                      <div style="margin-left:10px;float:left;width: 80px;height: 80px;">
                        <a href="maintain">
                        <img src="../assets/logo/6.png" style="width: 46px;height: 46px;margin-left: 15px;margin-top: 10px" alt="">
                        <br><span style="margin-left: 10px">查老赖</span>
                        </a>
                      </div>

                      <div style="margin-left:10px;float:left;width: 80px;height: 80px;">
                        <a href="maintain">
                        <img src="../assets/logo/7.png" style="width: 46px;height: 46px;margin-left: 15px;margin-top: 10px" alt="">
                        <br><span style="margin-left: 10px">查商标</span>
                        </a>
                      </div>

                      <div style="margin-left:10px;float:left;width: 80px;height: 80px;">
                        <a href="maintain">
                        <img src="../assets/logo/8.png" style="width: 46px;height: 46px;margin-left: 15px;margin-top: 10px" alt="">
                        <br><span style="margin-left: 10px">地图查询</span>
                        </a>
                      </div>
                    </div>

                    <br><br><br><br><br>
                    <div class="f_3">
                      <h3 style="margin-left: 10px">| 产品中心</h3>

                      <div style="float:left;margin-left:10px;width: 80px;height: 80px;">
                        <a href="maintain">
                        <img src="../assets/logo/9.png" style="width: 46px;height: 46px;margin-left: 15px;margin-top: 10px" alt="">
                        <br><span style="margin-left: 10px">积分商城</span>
                        </a>
                      </div>

                      <div style="margin-left:10px;float:left;width: 80px;height: 80px;">
                        <a href="maintain">
                        <img src="../assets/logo/10.png" style="width: 46px;height: 46px;margin-left: 15px;margin-top: 10px" alt="">
                        <br><span style="margin-left: 10px">商家中心</span>
                        </a>
                      </div>

                      <div style="margin-left:10px;float:left;width: 80px;height: 80px;">
                        <a href="maintain">
                        <img src="../assets/logo/11.png" style="width: 46px;height: 46px;margin-left: 15px;margin-top: 10px" alt="">
                        <br><span style="margin-left: 10px">导出记录</span>
                        </a>
                      </div>

                      <div style="margin-left:10px;float:left;width: 80px;height: 80px;">
                        <a href="maintain">
                        <img src="../assets/logo/12.png" style="width: 46px;height: 46px;margin-left: 15px;margin-top: 10px" alt="">
                        <br><span style="margin-left: 10px">我的关注</span>
                        </a>
                      </div>

                      <div style="margin-left:10px;float:left;width: 80px;height: 80px;">
                        <a href="maintain">
                        <img src="../assets/logo/13.png" style="width: 46px;height: 46px;margin-left: 15px;margin-top: 10px" alt="">
                        <br><span style="margin-left: 10px">我的纠错</span>
                        </a>
                      </div>
                      <br><br><br><br><br>

                      <div style="margin-left:10px;float:left;width: 80px;height: 80px;">
                        <a href="maintain">
                        <img src="../assets/logo/14.png" style="width: 46px;height: 46px;margin-left: 15px;margin-top: 10px" alt="">
                        <br><span style="margin-left: 10px">用户反馈</span>
                        </a>
                      </div>

                    </div>

                    <br><br><br><br><br>
                  </div>
                  <div class="bon_c " >
                    <span style="margin:auto;float:left;width: 450px;height: 50px;background-color: #f5f5f5">
                      <p style="margin-top: 18px;margin-left: 140px;color: gray"> 更多功能即将上线，敬请期待...</p>
                    </span>
                  </div>
                  <el-button style="border:none;background-color:rgba(28, 82, 228, 0);padding-top: 0;color: white;margin-bottom: 10px" class="head-menus-title" slot="reference">
                    <router-link :to="{name:'Apply'}">应用</router-link>
                  </el-button>
                </el-popover>
              </div>
            </div>
            <span class="line"> </span>
          </div>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
  import token from "./token.vue"
    export default {
      data(){
        return{
          d:{},
          type:token.type
        }
      },
      name: "Header",

      methods:{
        toVip(){
          this.$router.push({name:'Vip'})
        },
        /*单个id查询用户*/
        findUserById(id){
          this.updateFormVisible=true
          let _this = this
          console.log(id)
          this.$axios.get("http://localhost:8087/user/getUserById/"+id).then(function(res){
            _this.d = res.data
          }).catch(function (err) {
            alert('请登陆哦~')
          })
        },
        // 退出登录
        loginout(){
          removeItem('id')
        }

      },
      created() {
        this.findUserById(localStorage.getItem("id"))
      }
    }
</script>

<style scoped>
  .search-panel {
    width: 100%;
    height: 335px;
    padding-top: 140px;
    background-image: url(../assets/index-head-bg.b0229f0.png);
    background-color: #2972fa;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .header.transparent {
    background: transparent;
    box-shadow: none;
    color: #fff;
  }

  .header {
    width: 100%;
    height: 74px;
    background: #fff;
    position: absolute ;
    top: 0;
    z-index: 999;
    color: #333;
    box-shadow: 0 0 5px #ddd;
  }

  .header-content {
    width: 1200px;
    margin: 0 auto 0 calc(50vw - 605px);
  }

  .header.transparent .header-img {
    background-image: url(../assets/logo.png);
  }

  .header-img {
    float: left;
    width: 131px;
    height: 42px;
    margin-top: 16px;
    background: url(../assets/logo@2x.980bad0.png) no-repeat 50%;
    background-image: -webkit-image-set(url(../assets/logo@2x.980bad01.png) 2x);
    background-size: contain;
    cursor: pointer;
  }

  .header.transparent .header-func {
    margin-top: 0;
  }

  .compservice, .header-user-center, .line, .login, .register {
    float: left;
    margin-top: 27px;
  }

  a, a:hover {
    text-decoration: none;
  }

  a {
    outline: none;
  }

  a {
    color: #333;
    background: transparent;
    cursor: pointer;
    transition: color .1s ease;
  }

  .header.transparent a {
    color: #fff;
  }

  .header-func {
    float: right;
    margin-top: 13px;
  }

  .line {
    width: 2px;
    height: 10px;
    background: #ccc;
    margin: 33px 10px 0;
  }

  .header-compservice-wrap, .header-login {
    float: right;
    font-size: 14px;
  }

  .header-mall {
    float: right;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    font-weight: inherit;
  }

  .header-mall-link {
    float: left;
    margin-top: 27px;
  }

  .header-vip {
    float: right;
  }

  .header-vip img {
    float: left;
    margin-top: 30px;
    height: 14px;
    cursor: pointer;
  }

  .head-menus {
    float: right;
  }

  .head-menus .head-menus-poptip {
    float: left;
  }

  .ivu-poptip, .ivu-poptip-rel {
    display: inline-block;
  }

  .ivu-poptip-rel {
    position: relative;
  }

  .head-menus .head-menus-title {
    float: left;
    font-size: 14px;
    height: 24px;
    line-height: 24px;
    margin-top: 25px;
    cursor: pointer;
  }
</style>
